<meta name="referrer" content="never">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<style>
    #decorateApp {
        font-family: Source Han Sans SC;
        background: #fff;
        height: calc(100vh - 63px);
        padding: 0 20px;
        overflow: hidden;
    }

    button,
    button:focus {
        border-color: #B092E1 !important;
    }

    .selected {
        border: 1px solid #f66161;
    }

    .btn-common {
        width: 74px;
        height: 30px;
        line-height: 28px;
        background: #EEEAF7;
        border: 1px solid #B092E1;
        border-radius: 4px;
        color: #804ED1;
        font-size: 12px;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
    }

    .margin-left-20 {
        margin-left: 20px;
    }

    .decorate-title {
        height: 66px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #444;
    }

    .decorate-title-msg {
        font-style: 14px;
        font-weight: 600;
    }

    .decorate-title-button {
        display: flex;
        align-items: center;
    }

    .decorate-title-button-1,
    .decorate-title-button-2 {
        width: 88px;
        height: 32px;
        line-height: 30px;
    }

    .decorate-title-button-1 {
        margin: 0 30px;
    }

    .decorate-title-button-2 {
        background: #804ED1;
        color: #fff;
    }

    .decorate-body {
        height: calc(100vh - 129px);
        display: flex;
    }

    .decorate-left {
        width: 260px;
        box-sizing: border-box;
        height: 100%;
        overflow: auto;
    }

    .decorate-left::-webkit-scrollbar {
        width: 0px
    }

    .center-body {
        flex: 1;
        background: #F2F2F6;
        display: flex;
        justify-content: center;
        margin: 0 16px;
        border-radius: 10px 10px 0px 0px;
        padding: 40px 0 64px;
        position: relative;
    }
    .center-body .el-row {
        width: 100%;
        margin: 0 !important;
    }
    .decorate-center-container {
        width: 375px;
        height: 100%;
        overflow-y: auto;
        background: #F6F6F6;
        text-align: center;
        position: relative;
    }

    .decorate-center-container img {
        width: 100%;
        height: 100%;
    }

    .decorate-center-container .hot-label {
        width: 34px;
        height: 34px;
    }

    .scrollbar-container::-webkit-scrollbar {
        width: 6px;
    }

    .scrollbar-container::-webkit-scrollbar-thumb {
        width: 6px;
        background: #ccc;
        height: 20px;
        border-radius: 3px;
    }

    .decorate-right {
        height: calc(100vh - 129px);
        overflow: auto;
        overflow-x: hidden;
    }

    .decorate-right-item {
        padding: 8px 10px;
        font-size: 12px;
    }

    .decorate-right-item img {
        width: 34px;
        height: 34px;
        margin-right: 18px;
    }

    .decorate-right-item-title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
    }

    .select-style {
        margin: 10px;
    }

    .select-style .select-img {
        width: 78px;
        height: 38px;
    }

    .select-style .select-imgzheng {
        width: 38px;
        height: 38px;
    }

    .select-style-con {
        background: #F7F7FA;
        border: 1px solid #eee;
        color: #999;
        position: relative;
        padding: 12px 92px 48px;
        border-radius: 4px;
    }

    .select-style-con>img {
        width: 100%;
        height: 100%;
    }

    .select-style-item {
        margin: 16px 0;
        padding-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 4px;
        color: #444;
    }

    .select-style-item-title,
    .select-style-item-box {
        padding-left: 15px;
    }

    .select-style-item-title {
        background: #EFEFEF;
        height: 40px;
        margin: 0;
        line-height: 40px;
    }

    .select-style-item-box {
        height: 38px;
        margin-top: 10px;
    }

    .select-style-item-tip {
        line-height: 38px;
    }

    .select-style-item-select {
        line-height: 38px;
        height: 38px;
        display: flex;
        align-items: center;
    }

    .tip-line {
        line-height: 30px;
    }

    .input-select-inline {
        display: flex;
        align-items: center;
    }

    .input-select-inline .el-input {
        width: 80%;
    }

    .input-select-inline .el-input__inner {
        border-radius: 4px 0px 0px 4px;
        border-right: 0;
    }

    .input-select-inline .input-select-btn {
        width: 50px;
        height: 30px;
        line-height: 26px;
        background: #7536D0;
        border-radius: 0px 4px 4px 0px;
        color: #fff;
    }

    .radio-tip,
    .item-radio-group,
    .search-tip {
        height: 30px;
        line-height: 30px;

    }

    .el-radio {
        line-height: 30px;
    }

    .box-radio {
        margin-bottom: -16px;
    }

    .el-radio__input.is-checked .el-radio__inner {
        background: #804ED1;
        border-color: #804ED1;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #804ED1;
    }

    .detele-item {
        font-size: 24px;
        color: #f66161;
        text-align: right;
        padding-right: 8px;
    }

    .chooseAdvPic {
        height: 38px;
        background: #EEEAF7;
        width: 100%;
        border: none;
        color: #804ED1;
        font-size: 16px;
        position: absolute;
        left: 0;
        bottom: 0;
        border-radius: 0px 4px 4px 0px;
        line-height: 38px;
        text-align: center;
        cursor: pointer;
    }



    .item-close {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        text-align: center;
        z-index: 200;
    }

    .item-close I {
        color: #f66161;
        font-size: 20px;
    }

    .banner-add-btn {
        border: 1px dashed #6b7685;
        line-height: 32px;
        height: 32px;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }

    .right-container-iframe {
        display: flex;
        justify-content: center;
    }

    #preview {
        border: none;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        border-radius: 26px;
    }

    .right-container {
        background: #fff;
        height: calc(100vh - 130px);
        width: 350px;
        flex-shrink: 0;
    }



    .hide-item {
        display: none;
    }

    .sortable-ghost {
        height: 50px;
        overflow: hidden;
    }

    .sortable-ghost .hide-item {
        height: 50px;
        z-index: 1000;
        position: absolute;
        background: #fff;
        width: 100%;
        line-height: 50px;
        text-align: center;
        color: #2589ff;
        display: block;

    }

    .hide-item-left {
        position: absolute;
        z-index: 1000;
        height: 70px;
        background: #f00;
        left: 0;
        top: 0;
        display: none;
    }

    .el-dialog {
        width: 700px;
        height: 740px;
        border-radius: 10px;
    }

    .el-dialog__header {
        border-radius: 10px 10px 0 0;
    }

    .el-dialog__body {
        padding: 50px 40px 50px 75px;
    }

    .preview-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .web-preview {
        height: 594px;
        width: 300px;
        background: url('/assets/addons/groupon/img/decorate/preview_bg.png');
        padding: 18px;
    }

    .code-preview {
        width: 200px;
        height: 594px;
        padding: 28px 0;
        display: flex;
        flex-direction: column;
    }

    .template-title {
        font-size: 18px;
        color: #444;
        margin-bottom: 14px;
    }

    .template-company {
        color: #999;
        font-size: 12px;
    }

    .template-copyright {
        color: #999;
        font-size: 12px;
        margin-bottom: 14px;
    }

    .template-platform {
        color: #FF5306;
        font-size: 14px;
        display: flex;
    }

    .template-platform img {
        margin-right: 5px;
    }

    .wechart-code {
        margin-top: 64px;
    }

    .code-title {
        margin-top: 18px;
        font-size: 12px;
        color: #999;
    }

    .code-item {
        width: 132px;
        height: 132px;
    }

    .code-item-img {
        width: 100%;
        height: 100%;
    }

    /* 底部导航 */
    .select-color {
        display: flex;
        align-items: center;
        border-radius: 5px;
        border: 1px solid #eee;
    }

    .el-color-picker__color-inner {
        border-radius: 0 5px 5px 0;
        border: 1px solid #C0C4CC;
    }

    .select-color .el-input__inner,
    .el-color-picker__trigger,
    .el-color-picker__color {
        border: none;
    }

    .el-color-picker__trigger {
        padding: 0;
    }

    .el-radio {
        margin-right: 12px;
    }



    /* 标题栏 */
    .select-style-block {
        padding-bottom: 0px;
    }

    .title-block-body {
        background: #F6F6F6;
    }

    .title-block-title {
        position: absolute;
        left: 50%;
        top: 5px;
        margin-left: -40px;
        width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-style: 14px;
    }

    .title-block-style {
        width: 100%;
        height: 40px;
        margin-bottom: 8px;
    }

    .title-block-btn {
        /* width: 338px; */
        height: 42px;
        line-height: 42px;
        border-radius: 0px 0px 6px 6px;
        background: #EEEAF7;
        font-style: 16px;
        color: #804ED1;
        text-align: center;
        cursor: pointer;
    }

    .nav-bg {
        width: 100%;
        height: 58px;
        position: relative;
    }

    .el-drawer .rtl {
        width: 338px;
    }

    .one-ellipsis {
        display: block;
        width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #float-button {
        position: absolute;
        bottom: 50px;
        right: 25px;
    }

    .gg {
        margin-top: -10000px !important;
        z-index: -1000 !important;
    }

    .el-dialog__title {
        font-size: 16px;
    }

    .el-dialog__headerbtn .el-dialog__close {
        font-size: 18px;
    }

    .el-dialog__headerbtn .el-dialog__close:hover {
        color: #7438D5;
    }

    .save-dialog .el-dialog {
        height: 200px;
    }

    .save-dialog .el-dialog__body {
        padding: 30px 20px;
    }

    /* 轮播图 */
    .el-carousel__button {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

    /* adv */
    .adv-box {
        width: auto;
        height: 160px;
    }

    .adv-item-updown {
        flex-direction: column;
    }

    .leftright {
        display: flex;
    }

    .leftright>div {
        width: 50%;
    }

    .adv-1,
    .adv-2,
    .adv-3,
    .adv-4,
    .adv-5,
    .adv-6,
    .adv-7 {
        height: 100%;
        /* width: 100%; */
    }

    .adv-2,
    .adv-3,
    .adv-4,
    .adv-7-item {
        display: flex;
    }

    .adv-2-item,
    .adv-3-item,
    .adv-4-item {
        width: 50%;
    }

    .adv-3-item .height-50,
    .adv-4-item .height-50 {
        height: 50%;
    }

    .adv-5-item,
    .adv-6-item,
    .adv-7-item {
        height: 50%;
    }

    .adv-7-item-top>div {
        width: 50%;
    }

    .adv-7-item-bottom>div {
        width: 33.3%;
    }

    .order-card-box,
    .wallet-card-box {
        width: auto;
    }

    /* 商品 */
    .goods-list-box {
        display: flex;
        flex-wrap: wrap;
        min-height: 280px;
    }

    .goods-list-item {
        border-radius: 10px;
        background: #fff;
        margin-bottom: 5px;
    }

    .goods-list-img {
        background-color: #ccc;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .goods-list-tit {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 18px;
        height: 36px;
        margin: 10px 10px 5px;
        text-align: left;
    }

    .goods-list-subtitle {
        text-align: left;
        width: 100%;
        line-height: 28px;
        background: #f6f2ea;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #a8700d;
        padding: 0 10px;
    }

    .ellipsis-more-1 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .ellipsis-more {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .goods-list-price {
        display: flex;
        justify-content: space-between;
        padding: 5px 10px;
    }

    .goods-price {
        color: #e1212b
    }

    .goods-sales {
        color: #999;
    }

    /* menu */
    .menu-box {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 16px;
    }

    .menu-box-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0 0;
    }

    /* 优惠券 */
    .coupons-box {
        margin-bottom: 5px;
    }

    .coupons-box-item {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        height: 84px;
        margin: 10px 0;
        -webkit-mask: url('/assets/addons/groupon/img/decorate/coupons_bg.png') no-repeat;
        mask: url('/assets/addons/groupon/img/decorate/coupons_bg.png') no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

    .coupons-item-1 {
        padding-left: 20px;
    }
    .coupons-item-1-1{
        color: #fff;
        text-align: left;
    }
    .coupons-amount {
        font-size: 27px;
        font-weight: 700;
        line-height: 27px;
    }
    .coupons-name {
        font-size: 12px;
        font-weight: 700;
    }
    .coupons-enough,.coupons-time {
        font-size: 11px;
        color: #fff;
        opacity: 0.48;
        margin-top: 3px;
        text-align: left;
    } 
    .coupons-item-2 {
        padding-right: 20px;
    }

    .coupons-get {
        width: 71px;
        height: 27px;
        line-height: 27px;
        background: #FFFFFF;
        box-shadow: 0px 2px 5px 0px rgba(206, 158, 106, 0.46);
        border-radius: 13px;
        padding: 0;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #f00;
    }

    .coupons-stock {
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #fff;
        margin-top: 7px;
    }

    /* 拼团,秒杀 */
    .activity-box {
        height: 170px;
        overflow: hidden;
    }

    .activity-header {
        display: flex;
        align-items: center;
        height: 50px;
        justify-content: space-between;
        padding: 0 10px;
    }

    .activity-header-tip {
        color: #333;
        font-size: 16px;
        font-weight: 700;
    }

    .activity-more {
        font-size: 14px;
        padding-left: 15px;
        color: #666;
    }

    .activity-body {
        display: flex;
        align-items: center;
        height: 120px;
        overflow: hidden;
    }

    .activity-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    .activity-item-img {
        width: 76px;
        position: relative;
        height: 76px;
    }

    .team_num {
        position: absolute;
        left: 0;
        bottom: 0px;
        z-index: 2;
        line-height: 17px;
        background: -webkit-linear-gradient(318deg, #f3dfb1, #f3dfb1, #ecbe60);
        background: linear-gradient(132deg, #f3dfb1, #f3dfb1, #ecbe60);
        border-radius: 0 9px 9px 0;
        padding: 0 5px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 700;
        color: #784f06;
    }

    .activity-price {
        font-size: 15px;
        font-weight: 500;
        color: #e1212b;
    }

    .activity-originalprice {
        font-size: 10px;
        font-weight: 400;
        text-decoration: line-through;
        color: #999;
    }
    .el-image {
        width: 100%;
        height: 100%;
    }

    .goods-list-activity-container .el-image .el-image__inner {
        height: auto;
    }

    .el-image .image-slot {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }



    .image-border {
        border: 1px solid #e6e6e6;
    }

    .compotent-grid-list-item-tip {
        height: 12px;
        line-height: 12px;
        font-size: 12px;
    }

    .el-carousel__indicators--horizontal {
        display: none;
    }

    [v-cloak] {
        display: none
    }

    .left-menu-title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 44px;
        height: 44px;
        background: #F7F7FA;
        padding-left: 16px;
        box-sizing: border-box;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
    }

    .left-menu-container {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 8px 8px;
        border: 1px solid #eee;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        margin-bottom: 8px;
    }

    .left-menu-container-item {
        text-align: center;
        color: #444444;
        font-size: 12px;
        padding: 10px 0 10px;
        cursor: pointer;
        width: 75px;
        height: 75px;
        margin: 8px 8px 0px 0px;
        border: 1px solid #eee;
        background: #F7F7FA;
        border-radius: 4px;
    }
    .compotent-item-container {
        position: relative;
    }

    .compotent-item-container-item-padding {
        padding: 10px;
    }

    .compotent-item-container-item-margin {
        margin-bottom: 5px;
    }

    .compotent-search {
        width: auto;
        height: 32px;
        background: #f5f5f5;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .compotent-search i {
        margin-right: 10px;
    }

    /* adv */
    .display-flex {
        display: flex;
        align-items: center;
    }

    .adv-width-100 {
        width: 100%;
    }

    .adv-height-100 {
        height: 100%;
    }

    .adv-width-50 {
        width: 50%;
    }

    .adv-height-50 {
        height: 50%;
    }

    .adv-width-33 {
        width: 33.3%;
    }

    .adv-line-right {
        border-right: 1px solid #fff;
    }

    .adv-line-bottom {
        border-bottom: 1px solid #fff;
    }

    .compotent-adv-1 {
        height: 110px;
    }

    .compotent-adv-2 {
        /* height: 88px; */
        padding-bottom: 5px;
        display: flex;
    }
    .compotent-adv-2 .el-image{
        min-height: 100px;
    }
    .compotent-adv-2 .image-slot{
        min-height: 100px;
        border: 1px solid #e6e6e6;
    }

    .compotent-adv-3,
    .compotent-adv-4 {
        height: 177px;
        padding: 5px 0;
        display: flex;
    }

    .compotent-adv-5,
    .compotent-adv-6,
    .compotent-adv-7 {
        height: 170px;
        padding: 5px 0;
    }

    /* nav-list-box */

    .compotent-nav-list-item {
        height: 50px;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.5px solid #f3f3f3;
    }

    .compotent-nav-list-item-left {
        display: flex;
        align-items: center;
        /* width: 42px; */
        height: 42px;
        flex: 1;
    }

    .compotent-nav-list-item .compotent-nav-list-item-image {
        width: 22px;
        height: 22px;
        margin-right: 10px;
    }

    /* compotent-grid-list-item */
    .compotent-grid-list-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: 16px;
        min-height: 72px;
    }

    .compotent-grid-list-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0 0;
        height: 58px;
    }

    .compotent-grid-list-item-image {
        width: 44px;
        height: 44px;
        margin-bottom: 14px;
    }

    /* rich-text */
    .compotent-rich-text {
        height: 50px;
        line-height: 50px;
    }

    .compotent-title-block-container {
        position: relative;
    }

    .compotent-title-block-title {
        position: absolute;
        left: 50%;
        top: 5px;
        margin-left: -40px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .sortable-ghost {
        background: #fff;
        border-radius: 10px;
    }
    .center-draggable .sortable-ghost {
        width: 369px;
    }

    .seat-item {
        display: none;
    }

    .sortable-ghost .seat-item {
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: center;
        background: #EEEAF7;
    }

    .sortable-ghost .compotent-item-container {
        display: none;
    }

    .compotent-item-container-item {
        padding: 0 9px;
    }

    .menu-container {
        padding: 3px 10px 0;
        flex-wrap: wrap;
        background: #fff;
        border-radius: 10px;
    }

    .menu-container-item {
        padding-top: 12px;
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
    }

    .menu-container-item:nth-child(5n) {
        margin-right: 0;
    }

    .compotent-menu-item-image {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        margin-bottom: 10px;
        border: 1px solid #e6e6e6;
    }

    .compotent-adv-2-item {
        border-radius: 5px;
        overflow: hidden;
    }

    .compotent-adv-2-item:nth-child(1) {
        margin-right: 5px;
    }

    .compotent-supergroup {
        position: relative;
    }

    .supergroup-container {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 0px;
        width: auto;
        padding: 0 5px 0 10px;
    }

    .supergroup-more {
        color: #fff;
        font-size: 12px;
        margin: 22px 0 16px;
        justify-content: flex-end;
        padding-right: 2px;
    }

    .supergroup-more-icon {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-left: 8px;
        background: #fff;
        color: #FF7E5C;
        justify-content: center;
    }

    .supergroup-more-icon i {
        font-size: 12px;
        transform: scale(0.83, 0.83);
    }

    .supergroup-more-tip {
        line-height: 12px;
    }

    .supergroup-goods-image {
        width: 80px;
        height: 80px;
        background: #fff;
        border-radius: 5px;
        overflow: hidden;
    }

    .supergroup-goods-price {
        font-size: 14px;
        line-height: 14px;
        margin: 8px 0 6px 0;
    }

    .supergroup-goods-item {
        margin-right: 5px;
        width: 81px;
        color: #fff;
    }

    .supergroup-goods-originalprice,
    .supergroup-goods-num {
        font-size: 12px;
        transform: scale(0.8, 0.8);
        line-height: 9px;
        color: #FFFFFF;
        opacity: 0.6;
    }

    .supergroup-goods-num {
        opacity: 1;
    }

    .supergroup-goods-play {
        width: auto;
        margin: 6px 0 8px;
    }

    .supergroup-goods-play .el-progress-bar__outer {
        background: rgba(255, 255, 255, 0.5);
    }

    .supergroup-person {
        margin-bottom: 10px;
        line-height: 15px;
        color: #fff;
        justify-content: center;
        font-size: 12px;
    }

    .supergroup-person-image {
        width: 44px;
        height: 15px;
        border-radius: 50%;
    }

    .supergroup-person-tip {
        margin-left: 8px;
    }

    .goods-list-activity-container {
        /* height: 298px; */
        background: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        overflow: hidden;
    }

    .goods-list-activity-image {
        height: 180px;
        position: relative;
        overflow: hidden;
    }

    .goods-list-activity-image .el-image {
        height: auto;
    }
    .goods-list-activity-image .image-slot {
        height: 180px;
    }

    .goods-list-activity-image-label {
        position: absolute;
        top: 16px;
        left: 9px;
    }

    .goods-list-activity-image-label .limit-time {
        /* width: 40px;
        height: 32px; */
    }

    .goods-list-activity-describe {
        padding: 0 10px;
        font-size: 12px;
    }

    .goods-list-activity-name {
        font-size: 14px;
        color: #333;
        font-weight: 600;
        margin: 11px 0 5px;
        line-height: 20px;
        text-align: left;
    }

    .goods-list-activity-time {
        color: #999;
        margin-bottom: 12px;
        line-height: 12px;
        text-align: left;
    }

    .goods-list-activity-stock {
        color: #BEBEBE;
        text-align: left;
    }

    .goods-list-activity-play {
        width: 120px;
        margin-right: 10px;
        line-height: 6px;
        position: relative;
    }

    .goods-list-activity-play-label {
        position: absolute;
        left: 0;
        top: -10px;
        width: 10px;
        height: 14px;
        z-index: 10;
    }

    .goods-list-activity-play .el-progress-bar__outer {
        background: rgba(255, 99, 97, 0.2);
    }

    .goods-list-activity-price {
        justify-content: space-between;
    }

    .goods-list-activity-payprice {
        font-size: 15px;
        line-height: 18px;
        color: #D90000;
        display: flex;
        align-items: flex-end;
    }
    .goods-list-activity-payprice-decimal{
        font-size: 12px;
        line-height: 16px;
    }

    .goods-list-activity-originalprice {
        font-size: 14px;
        line-height: 14px;
        color: #C4C4C4;
        text-decoration: line-through;
        margin-left: 5px;
    }

    .goods-list-activity-button {
        width: 76px;
        height: 30px;
        background: linear-gradient(90deg, #FE3737, #D90000);
        border-radius: 30px;
        font-size: 13px;
        justify-content: center;
        color: #fff;
    }

    .goods-list-activity-container-2 {
        display: flex;
        flex-wrap: wrap;
    }

    .goods-list-activity-2item {
        width: 172px;
        margin-right: 5px;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .goods-list-activity-2item:nth-child(2n) {
        margin-right: 0;

    }

    .goods-list-activity-2item-image {
        height: 175px;
        background: #fff;
        position: relative;
    }

    .goods-list-activity-2item-name {
        margin: 9px 0 8px;
        color: #333;
        font-size: 14px;
        line-height: 16px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .goods-list-activity-2item-time {
        color: #999;
        margin-bottom: 12px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .goods-list-activity-2item-label {
        height: 20px;
    }

    .goods-list-activity-2item-label-1,
    .goods-list-activity-2item-label-2 {
        padding: 5px 10px;
        border: 1px solid #D90000;
        border-radius: 4px;
        font-size: 12px;
        transform: scale(0.83, 0.83);
        line-height: 10px;
        color: #D90000;
    }

    .goods-list-activity-2item-label-2 {
        background: #FF9600;
        margin-right: 5px;
    }

    .goods-list-activity-2item-price {
        justify-content: space-between;
        margin: 15px 0 10px;
        align-items: flex-end;
    }

    .goods-list-activity-2item-button {
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: linear-gradient(90deg, #FE3737, #D90000);
        padding: 6px;
    }

    .goods-list-activity-2item-payprice {
        font-size: 15px;
        line-height: 18px;
        font-weight: 500;
        color: #D90000;
        margin-bottom: 10px;
        display: flex;
        align-items: flex-end;
    }

    .goods-list-activity-2item-originalprice {
        font-size: 13px;
        font-weight: 400;
        text-decoration: line-through;
        color: #C4C4C4;
        line-height: 13px;
    }

    .compotent-delete-icon {
        margin-left: 40px;
        color: #f66161;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        font-size: 24px;
    }

    .compotent-nodata-tip {
        height: 100px;
        line-height: 100px;
    }

    .menu-item-tip {
        margin-top: 8px;
    }
    .menu-item-image{
        width: 30px;
        height: 30px;
    }

    .goods-list-activity-2item-price-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .goods-list-activity-tags {
        position: absolute;
        top: 16px;
        left: 9px;
        z-index: 1;
    }

    .nodata-container {
        position: absolute;
        top: 62px;
        height: calc(100% - 62px);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nodata-container img {
        width: 69px;
        height: 63px;
    }

    .header-bgcolor {
        width: 100%;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #f00;
        z-index: 0;
    }

    .header-name {
        font-size: 18px;
        position: absolute;
        color: #fff;
        top: 38px;
        left: 18px;
        display: flex;
        align-items: center;
    }
    .header-input {
        margin-left: 15px;
    }
    .header-input .el-input__inner{
        height: 23px;
        line-height: 23px;
        width: 70px;
        border-radius: 11px;
        padding-right: 10px;
    }
    .header-input .el-input__icon{
        line-height: 24px;
    }
    .compotent-store {
        height: 40px;
        border-radius: 5px;
        padding: 0 5px;
        justify-content: space-between;
        background: rgba(255,255,255,0.1);
        margin: 0px 0 10px;
    }

    .store-image {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 5px;
        background: #fff;
        overflow: hidden;
    }

    .store-name {
        font-size: 13px;
        line-height: 13px;
        padding-right: 5px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        margin-right: 5px;
    }

    .store-change {
        font-size: 13px;
        line-height: 13px;
        margin-right: 5px;
    }
    .compotent-category-tabs{
        overflow: hidden;
    }
    .compotent-category-tabs-item{
        padding: 15px 4px;
        color: #333;
        flex-shrink: 0;
    }
    .compotent-category-tabs-dis{
        position: relative;
        width: 83px;
        height: 22px;
        margin-top: 5px;
        line-height: 22px;
    }
    .tabs-description{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        font-size: 12px;
    }
    .store-share{
        font-size: 15px;
        margin-right: 8px;
    }
    .center-draggable{
        height: 100%;
        z-index: 100;
        position: relative;
        left: 0;
        top: 0;
    }
    .float-button-container {
        font-size: 16px;
        position: relative;
        height: calc(100vh - 230px);
        overflow: hidden;
    }
    .float-button-item {
        position: absolute;
        bottom: 50px;
        right: 25px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .float-button-image-container{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .float-button-image{
        width: 30px;
        height: 30px;
        border-radius: 15px;
        margin-bottom: 10px;
    }
    .popup-Container .image-slot {
        font-size: 40px;
        color: #999;
    }
    .popup-item {
        position: relative;
        height: 100%;
    }
    .popup-item-container {
        bottom: 0px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background: #fff;
        height: 100%;background:#999;overflow: hidden;
    }
    .popup-item-list{
        position: relative;
        width: 292px;
        height: 454px;
    }
    .popup-item-list-image{
        width: 100%;
        height: 100%;
        background: #fff;
        position: absolute;
        border: 1px solid #e6e6e6;
        border-radius: 5px;
    }
    .decorate-index-typechange {
        position: absolute;
        bottom: 0;
        height: 54px;
        width: 100%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -6px 4px 0px rgba(25, 25, 25, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .decorate-typechange-button {
        margin-right: 10px;
        border: 1px solid #E6E6E6;
        color: #999;
        background: #fff;
    }

    .decorate-typechange-button:last-child {
        margin: 0;
    }

    .decorate-typechange-button-active {
        color: #fff;
        background: #804ED1;
    }
    .compotent-item-header{
        position: relative;
        z-index: 100;
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/color-thief.js"></script>
<div id="decorateApp" v-cloak style="height: calc(100vh - 63px);">
    <div class="decorate-title">
        <div class="decorate-title-msg">
            {{fromtype=='custom'?'专题页面':'店铺装修主页'}}
        </div>
        <div class="decorate-title-button">
            <div class="btn-common decorate-title-button-2" @click="goPreserve()">保存</div>
        </div>
    </div>
    <div class="decorate-body">
        <div v-if="fromtype=='custom' || (fromtype=='shop' && isPageType=='home')" class="decorate-left">
            <div v-for="item in toolsBox" :key="item.id" v-if="!(fromtype=='shop' && item.name=='其他')">
                <div class="left-menu-title">
                    <span>{{item.name}}</span>
                </div>
                <draggable class="left-menu-container" :list="item.data" v-bind="$attrs" :options="menuOption"
                    :move="menuMove" @start="menuStart" @end="menuEnd">
                    <div v-for="(ite,idx) in item.data" class="left-menu-container-item" :class="ite.type"
                        v-if="(fromtype=='custom' && ite.type!='menu' && ite.type!='store' && ite.type!='category-tabs') || (fromtype=='shop' && (ite.type=='menu' || ite.type=='adv' || ite.type=='title-block' || ite.type=='goods-list' || ite.type=='goods-group' || ite.type=='banner' || ite.type=='store'  || ite.type=='category-tabs' || ite.type=='coupons'))"
                        @click.stop="selectTools(ite.type)">
                        <img class="menu-item-image" :src="ite.image">
                        <div class="menu-item-tip">{{ite.name}}</div>
                    </div>
                </draggable>
            </div>
        </div>
        <div class="center-body">
            <div v-if="fromtype=='custom'" class="decorate-center-container scrollbar-container" ref="contantColor"
                style="background: #fff;">
                <div v-if="templateData && templateData.length==0"
                    class="nodata-container">
                    <img style="width:69px;height:63px;" src="/assets/addons/groupon/img/decorate/zujian.png">
                </div>
                <draggable :list="templateData" v-bind="$attrs" class="center-draggable" :options="defaultOption"
                    :move="centerMove" @end="centerEnd">
                    <template v-if="templateData && templateData.length>0">
                        <div class="compotent-item" v-for="(compotent,index) in templateData"
                            @click.stop="compotentShowForm(index)">
                            <div class="seat-item">
                                可放在此处
                            </div>
                            <div class="compotent-item-container">
                                <div v-if="compotent.type=='special-image' && compotent.content" class="undraggable compotent-item-container-item compotent-item-container-item-margin compotent-item-container-item-padding"
                                    style="padding: 0;" :class="index==centerSelect?'selected':''">
                                    <div style="height: 184px;">
                                        <el-image class="label-auto" style="width: 100%; height: 184px"
                                            :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="contain">
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                    </div>
                                </div>
                                <div v-if="compotent.type=='banner' && compotent.content" class="compotent-item-container-item compotent-item-container-item-margin compotent-item-container-item-padding"
                                    :class="index==centerSelect?'selected':''">
                                    <div style="width: auto;height:175px;">
                                        <el-carousel trigger="click" height="175px">
                                            <el-carousel-item v-for="(it,index) in compotent.content.list" :key="it">
                                                <div style="height: 175px;">
                                                    <el-image v-if="it.image" class="label-auto"
                                                        style="width: 100%; height: 175px"
                                                        :src="Fast.api.cdnurl(it.image)" fit="contain">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                </div>
                                <div v-if="compotent.type=='adv' && compotent.content" class="compotent-item-container-item compotent-item-container-item-padding"
                                    :class="index==centerSelect?'selected':''">
                                    <!-- 1 -->
                                    <div v-if="compotent.content.style==1" class="compotent-adv-1">
                                        <el-image v-if="compotent.content.list[0].image"
                                            :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="contain">
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                    </div>
                                    <!-- 2 -->
                                    <div v-if="compotent.content.style==2" class="compotent-adv-2">
                                        <div class="adv-width-50 adv-height-100" v-for="it in compotent.content.list">
                                            <el-image v-if="it.image" :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </div>
                                    <!-- 3 -->
                                    <div v-if="compotent.content.style==3" class="compotent-adv-3">
                                        <div class="adv-width-50 adv-height-100 adv-line-right">
                                            <el-image v-if="compotent.content.list[0].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div class="adv-width-50 adv-height-100">
                                            <div class="adv-width-100 adv-height-50 adv-line-bottom">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-100 adv-height-50">
                                                <el-image v-if="compotent.content.list[2].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 4 -->
                                    <div v-if="compotent.content.style==4" class="compotent-adv-4">
                                        <div class="adv-width-50 adv-height-100 adv-line-right">
                                            <div class="adv-width-100 adv-height-50 adv-line-bottom">
                                                <el-image v-if="compotent.content.list[0].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-100 adv-height-50">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <div class="adv-width-50 adv-height-100">
                                            <el-image v-if="compotent.content.list[2].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </div>
                                    <!-- 5 -->
                                    <div v-if="compotent.content.style==5" class="compotent-adv-5">
                                        <div class="adv-width-100 adv-height-50 adv-line-bottom display-flex">
                                            <div class="adv-width-50 adv-height-100 adv-line-right">
                                                <el-image v-if="compotent.content.list[0].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-50 adv-height-100">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <div class="adv-width-100 adv-height-50">
                                            <el-image v-if="compotent.content.list[2].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </div>
                                    <!-- 6 -->
                                    <div v-if="compotent.content.style==6" class="compotent-adv-6">
                                        <div class="adv-width-100 adv-height-50 adv-line-bottom">
                                            <el-image v-if="compotent.content.list[0].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div class="adv-width-100 adv-height-50 display-flex">
                                            <div class="adv-width-50 adv-height-100 adv-line-right">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-50 adv-height-100">
                                                <el-image v-if="compotent.content.list[2].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 7 -->
                                    <div v-if="compotent.content.style==7" class="compotent-adv-7">
                                        <div class="adv-width-100 adv-height-50 adv-line-bottom display-flex">
                                            <div class="adv-width-50 adv-height-100 adv-line-right">
                                                <el-image v-if="compotent.content.list[0].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-50 adv-height-100">
                                                <el-image v-if="compotent.content.list[1].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <div class="adv-width-100 adv-height-50 display-flex">
                                            <div class="adv-width-33 adv-height-100 adv-line-right">
                                                <el-image v-if="compotent.content.list[2].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-33 adv-height-100 adv-line-right">
                                                <el-image v-if="compotent.content.list[3].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[3].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-33 adv-height-100">
                                                <el-image v-if="compotent.content.list[4].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[4].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="compotent.type=='title-block' && compotent.content" class="compotent-item-container-item" :class="index==centerSelect?'selected':''">
                                    <div class="compotent-title-block-container">
                                        <div style="height: 42px;">
                                            <img v-if="compotent.content.image"
                                                :src="Fast.api.cdnurl(compotent.content.image)" class="label-auto">
                                        </div>
                                        <div class="compotent-title-block-title"
                                            :style="{'color':compotent.content.color}">
                                            {{compotent.content.name}}
                                        </div>
                                    </div>
                                </div>
                                <div v-if="(compotent.type=='goods-list' || compotent.type=='goods-group') && compotent.content && compotent.content.timeData" class="compotent-item-container-item compotent-item-container-item-padding"
                                    :class="index==centerSelect?'selected':''">
                                    <div
                                        v-if="compotent.content.type==1 && compotent.content.timeData && compotent.content.timeData.length>0">
                                        <div class="goods-list-activity-container"
                                            v-for="it in compotent.content.timeData">
                                            <div class="goods-list-activity-image">
                                                <el-image :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                                <div class="goods-list-activity-image-label">
                                                    <img v-if="it.activity_status=='waiting' || it.activity_status=='ing'" class="label-auto hot-label"
                                                        src="/assets/addons/groupon/img/decorate/limit-time.png">
                                                    <template
                                                        v-if="it.activity_status!='waiting' && it.activity_status!='ing'">
                                                        <img v-if="it.is_hot==1" class="label-auto hot-label"
                                                            src="/assets/addons/groupon/img/decorate/hot-label.png">
                                                    </template>
                                                </div>
                                            </div>
                                            <div class="goods-list-activity-describe">
                                                <div class="goods-list-activity-name">
                                                    {{it.title}}
                                                </div>
                                                <div class="goods-list-activity-time">
                                                    {{it.subtitle}}
                                                </div>
                                                <div class="goods-list-activity-stock display-flex">
                                                    <div class="goods-list-activity-play">
                                                        <div class="goods-list-activity-play-label">
                                                            <img class="label-auto seckill"
                                                                src="/assets/addons/groupon/img/decorate/activity-fire.png">
                                                        </div>
                                                        <el-progress color="#FF6361" :percentage="50"
                                                            :show-text="false"></el-progress>
                                                    </div>
                                                    <div>已售50件</div>
                                                </div>
                                                <div class="goods-list-activity-price display-flex">
                                                    <div class="display-flex"
                                                        style="align-items: flex-end;height: 29px;">
                                                        <div class="goods-list-activity-payprice">
                                                            <span>￥{{it.price.split('.')[0]}}</span>
                                                            <span v-if="it.price.split('.')[1]" class="goods-list-activity-payprice-decimal">.{{it.price.split('.')[1]}}</span>
                                                        </div>
                                                        <div class="goods-list-activity-originalprice">
                                                            ￥{{it.original_price}}</div>
                                                    </div>
                                                    <div class="goods-list-activity-button display-flex">
                                                        加购物车</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="compotent.content.type==2 && compotent.content.timeData.length>0"
                                        class="goods-list-activity-container-2">
                                        <div class="goods-list-activity-2item" v-for="it in compotent.content.timeData"
                                            v-if="compotent.content.timeData">
                                            <div class="goods-list-activity-2item-image">
                                                <div class="goods-list-activity-tags">
                                                    <img v-if="it.activity_status=='waiting' || it.activity_status=='ing'" class="label-auto hot-label"
                                                            src="/assets/addons/groupon/img/decorate/limit-time.png">
                                                        <template
                                                            v-if="it.activity_status!='waiting' && it.activity_status!='ing'">
                                                            <img v-if="it.is_hot==1" class="label-auto hot-label"
                                                                src="/assets/addons/groupon/img/decorate/hot-label.png">
                                                        </template>
                                                </div>
                                                <el-image :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="goods-list-activity-describe">
                                                <div class="goods-list-activity-2item-name">{{it.title}}</div>
                                                <div class="goods-list-activity-2item-time">
                                                    {{it.subtitle}}
                                                </div>
                                                <div class="goods-list-activity-2item-label display-flex">
                                                    <template v-if="it.activity_status=='waiting' || it.activity_status=='ing'">
                                                        <div class="goods-list-activity-2item-label-1">限购5件</div>
                                                    </template>
                                                </div>
                                                <div class="goods-list-activity-2item-price display-flex">
                                                    <div class="goods-list-activity-2item-price-left display-flex">
                                                        <div class="goods-list-activity-2item-payprice">
                                                            <span>￥{{it.price.split('.')[0]}}</span>
                                                            <span v-if="it.price.split('.')[1]" class="goods-list-activity-payprice-decimal">.{{it.price.split('.')[1]}}</span>
                                                        </div>
                                                        <div class="goods-list-activity-2item-originalprice">
                                                            ￥{{it.original_price}}</div>
                                                    </div>
                                                    <div class="goods-list-activity-2item-button"
                                                        v-if="it.activity_type!='groupon' && it.activity_type!='seckill'">
                                                        <el-image src="/assets/addons/groupon/img/decorate/cat.png"
                                                            fit="contain">
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="compotent-nodata-tip"
                                        v-if="compotent.content.timeData && compotent.content.timeData.length==0">
                                        请选择分类或商品
                                    </div>
                                </div>
                                <div v-if="compotent.type=='coupons' && compotent.content && compotent.content.timeData" class="compotent-item-container-item compotent-item-container-item-padding" :class="index==centerSelect?'selected':''">
                                    <div v-if="compotent.content.timeData && compotent.content.timeData.length>0" class="coupons-box">
                                        <el-carousel trigger="click" height="104px" :autoplay="false">
                                            <el-carousel-item v-for="it in compotent.content.timeData" :key="it">
                                                <div class="coupons-box-item" :style="{background:(compotent.content.bgcolor1 && compotent.content.bgcolor2)?'linear-gradient(to right,'+compotent.content.bgcolor1 +','+compotent.content.bgcolor2+')':(compotent.content.bgcolor1?compotent.content.bgcolor1:compotent.content.bgcolor2)}">
                                                    <div class="coupons-item-1">
                                                        <div class="coupons-item-1-1">
                                                            <span>￥</span>
                                                            <span class="coupons-amount">{{it.amount}}</span>
                                                            <span class="coupons-name">{{it.name}}</span>
                                                        </div>
                                                        <div class="coupons-enough">满{{it.enough}}可用</div>
                                                        <div class="coupons-time">有效期{{moment(it.usetimestart*1000).format('YYYY.MM.DD')}}至{{moment(it.usetimeend*1000).format('YYYY.MM.DD')}}</div>
                                                    </div>
                                                    <div class="coupons-item-2">
                                                        <div class="coupons-get">立即领取</div>
                                                        <div class="coupons-stock">仅剩{{it.stock}}张</div>
                                                    </div>
                                                </div>
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                    <el-image v-if="compotent.content.timeData && compotent.content.timeData.length==0"
                                        src="/assets/addons/groupon/img/decorate/coupons_bg.png" fit="contain">
                                    </el-image>
                                </div>
                                <div v-if="index==centerSelect" class="compotent-delete-icon">
                                    <i class="el-icon-error" @click.stop="centerDel(index)"></i>
                                </div>
                            </div>
                        </div>
                    </template>
                </draggable>
            </div>
            <template v-if="fromtype=='shop'">
                <div v-if="isPageType=='home'" class="decorate-center-container scrollbar-container">
                    <div v-if="templateData && templateData.length==0" class="nodata-container">
                        <img src="/assets/addons/groupon/img/decorate/zujian.png" />
                    </div>
                    <div v-if="templateData && templateData[0] && templateData[0].content" class="header-bgcolor"
                        :style="{'background': 'linear-gradient('+templateData[0].content.bgcolor+' 270px, #f6f6f6)'}">
                    </div>
                    <draggable :list="templateData" v-bind="$attrs" class="center-draggable" :options="defaultOption"
                        :move="centerMove" @end="centerEnd">
                        <template v-if="templateData && templateData.length>0">
                            <div class="compotent-item" v-for="(compotent,index) in templateData"
                                @click.stop="compotentShowForm(index)">
                                <div class="seat-item">
                                    可放在此处
                                </div>
                                <div class="compotent-item-container">
                                    <div v-if="compotent.type=='header'" class="undraggable compotent-item-header"
                                        :style="{background:compotent.content.bgcolor}">
                                        <el-image src="/assets/addons/groupon/img/decorate/header.png" fit="cover">
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                        <div class="header-name">
                                            <span>{{compotent.content.name}}</span>
                                            <div class="header-input">
                                                <el-input placeholder="搜索">
                                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                                </el-input>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if=" compotent.type=='store' && compotent.content">
                                        <div class="compotent-item-container-item compotent-item-container-item-margin compotent-item-container-item-padding"
                                            :class="index==centerSelect?'selected':''">
                                            <div class="compotent-store display-flex" :style="{color:compotent.content.color,background:compotent.content.bgcolor}">
                                                <div class="display-flex">
                                                    <div class="store-image">
                                                        <el-image src="/assets/addons/groupon/img/decorate/store-image.jpg"
                                                            fit="cover">
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </div>
                                                    <div class="store-name">附近自提点</div>
                                                    <div class="store-change">切换</div>
                                                    <i class="el-icon-arrow-right"></i>
                                                </div>
                                                <div class="display-flex">
                                                    <i class="store-share el-icon-share">
                                                    </i>
                                                    分享
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="compotent.type=='banner' && compotent.content">
                                        <div class="compotent-item-container-item compotent-item-container-item-margin compotent-item-container-item-padding"
                                            :class="index==centerSelect?'selected':''">
                                            <div style="width: auto;height:140px;overflow: hidden;border-radius: 10px;">
                                                <el-carousel trigger="click" height="140px">
                                                    <el-carousel-item v-for="(it,index) in compotent.content.list"
                                                        :key="it">
                                                        <el-image
                                                            :src="Fast.api.cdnurl(it.image)?Fast.api.cdnurl(it.image):'/assets/addons/groupon/img/decorate/index-banner.png'"
                                                            fit="cover">
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </el-carousel-item>
                                                </el-carousel>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="compotent.type=='menu' && compotent.content && compotent.content.list" class="compotent-item-container-item" style="margin-bottom: 6px;" :class="index==centerSelect?'selected':''">
                                        <el-carousel trigger="click"
                                            :height="compotent.content.list.length>compotent.content.style?'180px':'94px'" :autoplay="false">
                                            <el-carousel-item
                                                v-for="(it,calindex) in Math.ceil(compotent.content.list.length/(compotent.content.style*2))" :key="compotent">
                                                <div class="menu-container display-flex">
                                                    <div v-if="(calindex+1)*compotent.content.style*2>=(index+1) && index+1>(calindex)*compotent.content.style*2" class="menu-container-item"
                                                    :style="{width:compotent.content.style==4?'25%':'20%'}"
                                                        v-for="(i,index) in compotent.content.list">
                                                        <div class="compotent-menu-item-image">
                                                            <el-image :src="Fast.api.cdnurl(i.image)" fit="cover">
                                                                <div slot="error" class="image-slot">
                                                                    <i class="el-icon-picture-outline"></i>
                                                                </div>
                                                            </el-image>
                                                        </div>
                                                        <div v-if="i.name" class="compotent-grid-list-item-tip">
                                                            {{i.name}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                    <div v-if="compotent.type=='adv' && compotent.content" class="compotent-item-container-item compotent-item-container-item-padding"
                                        :class="index==centerSelect?'selected':''">
                                        <!-- 1 -->
                                        <div v-if="compotent.content.style==1" class="compotent-adv-1">
                                            <el-image v-if="compotent.content.list[0].image"
                                                :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <!-- 2 -->
                                        <div v-if="compotent.content.style==2" class="compotent-adv-2">
                                            <div class="adv-width-50 adv-height-100 compotent-adv-2-item"
                                                v-for="it in compotent.content.list">
                                                <el-image v-if="it.image"
                                                    :src="Fast.api.cdnurl(it.image)?Fast.api.cdnurl(it.image):'/assets/addons/groupon/img/decorate/index-adv-2.png'"
                                                    fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <!-- 3 -->
                                        <div v-if="compotent.content.style==3" class="compotent-adv-3">
                                            <div class="adv-width-50 adv-height-100 adv-line-right">
                                                <el-image v-if="compotent.content.list[0].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-50 adv-height-100">
                                                <div class="adv-width-100 adv-height-50 adv-line-bottom">
                                                    <el-image v-if="compotent.content.list[1].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="adv-width-100 adv-height-50">
                                                    <el-image v-if="compotent.content.list[2].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 4 -->
                                        <div v-if="compotent.content.style==4" class="compotent-adv-4">
                                            <div class="adv-width-50 adv-height-100 adv-line-right">
                                                <div class="adv-width-100 adv-height-50 adv-line-bottom">
                                                    <el-image v-if="compotent.content.list[0].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="adv-width-100 adv-height-50">
                                                    <el-image v-if="compotent.content.list[1].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                            </div>
                                            <div class="adv-width-50 adv-height-100">
                                                <el-image v-if="compotent.content.list[2].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <!-- 5 -->
                                        <div v-if="compotent.content.style==5" class="compotent-adv-5">
                                            <div class="adv-width-100 adv-height-50 adv-line-bottom display-flex">
                                                <div class="adv-width-50 adv-height-100 adv-line-right">
                                                    <el-image v-if="compotent.content.list[0].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="adv-width-50 adv-height-100">
                                                    <el-image v-if="compotent.content.list[1].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                            </div>
                                            <div class="adv-width-100 adv-height-50">
                                                <el-image v-if="compotent.content.list[2].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                        </div>
                                        <!-- 6 -->
                                        <div v-if="compotent.content.style==6" class="compotent-adv-6">
                                            <div class="adv-width-100 adv-height-50 adv-line-bottom">
                                                <el-image v-if="compotent.content.list[0].image"
                                                    :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="adv-width-100 adv-height-50 display-flex">
                                                <div class="adv-width-50 adv-height-100 adv-line-right">
                                                    <el-image v-if="compotent.content.list[1].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="adv-width-50 adv-height-100">
                                                    <el-image v-if="compotent.content.list[2].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 7 -->
                                        <div v-if="compotent.content.style==7" class="compotent-adv-7">
                                            <div class="adv-width-100 adv-height-50 adv-line-bottom display-flex">
                                                <div class="adv-width-50 adv-height-100 adv-line-right">
                                                    <el-image v-if="compotent.content.list[0].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[0].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="adv-width-50 adv-height-100">
                                                    <el-image v-if="compotent.content.list[1].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[1].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                            </div>
                                            <div class="adv-width-100 adv-height-50 display-flex">
                                                <div class="adv-width-33 adv-height-100 adv-line-right">
                                                    <el-image v-if="compotent.content.list[2].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[2].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="adv-width-33 adv-height-100 adv-line-right">
                                                    <el-image v-if="compotent.content.list[3].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[3].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="adv-width-33 adv-height-100">
                                                    <el-image v-if="compotent.content.list[4].image"
                                                        :src="Fast.api.cdnurl(compotent.content.list[4].image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="(compotent.type=='goods-list' || compotent.type=='goods-group') && compotent.content && compotent.content.timeData" class="compotent-item-container-item compotent-item-container-item-padding"
                                        :class="index==centerSelect?'selected':''">
                                        <div v-if="compotent.content.type==1 && compotent.content.timeData && compotent.content.timeData.length>0">
                                            <div class="goods-list-activity-container"
                                                v-for="it in compotent.content.timeData">
                                                <div class="goods-list-activity-image">
                                                    <el-image :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                    <div class="goods-list-activity-image-label">
                                                        <img v-if="it.activity_status=='waiting' || it.activity_status=='ing'" class="label-auto hot-label"
                                                            src="/assets/addons/groupon/img/decorate/limit-time.png">
                                                        <template
                                                            v-if="it.activity_status!='waiting' && it.activity_status!='ing'">
                                                            <img v-if="it.is_hot==1" class="label-auto hot-label"
                                                                src="/assets/addons/groupon/img/decorate/hot-label.png">
                                                        </template>
                                                    </div>
                                                </div>
                                                <div class="goods-list-activity-describe">
                                                    <div class="goods-list-activity-name">
                                                        {{it.title}}
                                                    </div>
                                                    <div class="goods-list-activity-time">
                                                        {{it.subtitle}}
                                                    </div>
                                                    <div class="goods-list-activity-stock display-flex">
                                                        <div class="goods-list-activity-play">
                                                            <div class="goods-list-activity-play-label">
                                                                <img class="label-auto seckill"
                                                                    src="/assets/addons/groupon/img/decorate/activity-fire.png">
                                                            </div>
                                                            <el-progress color="#FF6361" :percentage="50"
                                                                :show-text="false"></el-progress>
                                                        </div>
                                                        <div>已售50件</div>
                                                    </div>
                                                    <div class="goods-list-activity-price display-flex">
                                                        <div class="display-flex"
                                                            style="align-items: flex-end;height: 29px;">
                                                            <div class="goods-list-activity-payprice">
                                                                <span>￥{{it.price.split('.')[0]}}</span>
                                                                <span v-if="it.price.split('.')[1]" class="goods-list-activity-payprice-decimal">.{{it.price.split('.')[1]}}</span>
                                                            </div>
                                                            <div class="goods-list-activity-originalprice">
                                                                ￥{{it.original_price}}</div>
                                                        </div>
                                                        <div class="goods-list-activity-button display-flex">
                                                            加购物车</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="compotent.content.type==2 && compotent.content.timeData.length>0"
                                            class="goods-list-activity-container-2">
                                            <div class="goods-list-activity-2item" v-for="it in compotent.content.timeData"
                                                v-if="compotent.content.timeData">
                                                <div class="goods-list-activity-2item-image">
                                                    <div class="goods-list-activity-tags">
                                                        <img v-if="it.activity_status=='waiting' || it.activity_status=='ing'" class="label-auto hot-label"
                                                            src="/assets/addons/groupon/img/decorate/limit-time.png">
                                                        <template
                                                            v-if="it.activity_status!='waiting' && it.activity_status!='ing'">
                                                            <img v-if="it.is_hot==1" class="label-auto hot-label"
                                                                src="/assets/addons/groupon/img/decorate/hot-label.png">
                                                        </template>
                                                    </div>
                                                    <el-image :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="goods-list-activity-describe">
                                                    <div class="goods-list-activity-2item-name">{{it.title}}</div>
                                                    <div class="goods-list-activity-2item-time">
                                                        {{it.subtitle}}
                                                    </div>
                                                    <div class="goods-list-activity-2item-label display-flex">
                                                        <template v-if="it.activity_status=='waiting' || it.activity_status=='ing'">
                                                            <div class="goods-list-activity-2item-label-1">限购5件</div>
                                                        </template>
                                                    </div>
                                                    <div class="goods-list-activity-2item-price display-flex">
                                                        <div class="goods-list-activity-2item-price-left display-flex">
                                                            <div class="goods-list-activity-2item-payprice">
                                                                <span>￥{{it.price.split('.')[0]}}</span>
                                                                <span v-if="it.price.split('.')[1]" class="goods-list-activity-payprice-decimal">.{{it.price.split('.')[1]}}</span>
                                                            </div>
                                                            <div class="goods-list-activity-2item-originalprice">
                                                                ￥{{it.original_price}}</div>
                                                        </div>
                                                        <div class="goods-list-activity-2item-button"
                                                            v-if="it.activity_type!='groupon' && it.activity_type!='seckill'">
                                                            <el-image src="/assets/addons/groupon/img/decorate/cat.png"
                                                                fit="contain">
                                                                <div slot="error" class="image-slot">
                                                                    <i class="el-icon-picture-outline"></i>
                                                                </div>
                                                            </el-image>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="compotent-nodata-tip"
                                            v-if="compotent.content.timeData && compotent.content.timeData.length==0">
                                            请选择分类或自定义商品生成样式
                                        </div>
                                    </div>
                                    <div v-if="compotent.type=='title-block' && compotent.content" 
                                        class="compotent-item-container-item" 
                                        :class="index==centerSelect?'selected':''">
                                        <div class="compotent-title-block-container">
                                            <div style="height: 42px;">
                                                <img v-if="compotent.content.image"
                                                    :src="Fast.api.cdnurl(compotent.content.image)" class="label-auto">
                                            </div>
                                            <div class="compotent-title-block-title"
                                                :style="{'color':compotent.content.color}">
                                                {{compotent.content.name}}
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="compotent.type=='category-tabs' && compotent.content && compotent.content.timeData" class="compotent-item-container-item compotent-item-container-item-padding undraggable"
                                        :class="index==centerSelect?'selected':''">
                                        <div class="compotent-category-tabs display-flex">
                                            <div class="compotent-category-tabs-item" v-for="(tabs,tindex) in compotent.content.category_arr">
                                                <div>{{tabs.name}}</div>
                                                <div class="compotent-category-tabs-dis">
                                                    <el-image v-if="tindex==0" src="/assets/addons/groupon/img/decorate/tabs-active.png" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                    <span class="tabs-description" :style="{color:tindex==0?'#fff':'#999'}">{{tabs.description}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="compotent.content.type==1 && compotent.content.timeData && compotent.content.timeData.length>0">
                                            <div class="goods-list-activity-container"
                                                v-for="it in compotent.content.timeData">
                                                <div class="goods-list-activity-image">
                                                    <el-image :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                    <div class="goods-list-activity-image-label">
                                                        <img v-if="it.activity_status=='waiting' || it.activity_status=='ing'" class="label-auto hot-label"
                                                            src="/assets/addons/groupon/img/decorate/limit-time.png">
                                                        <template
                                                            v-if="it.activity_status!='waiting' && it.activity_status!='ing'">
                                                            <img v-if="it.is_hot==1" class="label-auto hot-label"
                                                                src="/assets/addons/groupon/img/decorate/hot-label.png">
                                                        </template>
                                                    </div>
                                                </div>
                                                <div class="goods-list-activity-describe">
                                                    <div class="goods-list-activity-name">
                                                        {{it.title}}
                                                    </div>
                                                    <div class="goods-list-activity-time">
                                                        {{it.subtitle}}
                                                    </div>
                                                    <div class="goods-list-activity-stock display-flex">
                                                        <div class="goods-list-activity-play">
                                                            <div class="goods-list-activity-play-label">
                                                                <img class="label-auto seckill"
                                                                    src="/assets/addons/groupon/img/decorate/activity-fire.png">
                                                            </div>
                                                            <el-progress color="#FF6361" :percentage="50"
                                                                :show-text="false"></el-progress>
                                                        </div>
                                                        <div>已售50件</div>
                                                    </div>
                                                    <div class="goods-list-activity-price display-flex">
                                                        <div class="display-flex"
                                                            style="align-items: flex-end;height: 29px;">
                                                            <div class="goods-list-activity-payprice">
                                                                <span>￥{{it.price.split('.')[0]}}</span>
                                                                <span v-if="it.price.split('.')[1]" class="goods-list-activity-payprice-decimal">.{{it.price.split('.')[1]}}</span>
                                                            </div>
                                                            <div class="goods-list-activity-originalprice">
                                                                ￥{{it.original_price}}</div>
                                                        </div>
                                                        <div class="goods-list-activity-button display-flex">
                                                            加购物车</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="compotent.content.type==2 && compotent.content.timeData.length>0"
                                            class="goods-list-activity-container-2">
                                            <div class="goods-list-activity-2item" v-for="it in compotent.content.timeData"
                                                v-if="compotent.content.timeData">
                                                <div class="goods-list-activity-2item-image">
                                                    <div class="goods-list-activity-tags">
                                                        <img v-if="it.activity_status=='waiting' || it.activity_status=='ing'" class="label-auto hot-label"
                                                            src="/assets/addons/groupon/img/decorate/limit-time.png">
                                                        <template
                                                            v-if="it.activity_status!='waiting' && it.activity_status!='ing'">
                                                            <img v-if="it.is_hot==1" class="label-auto hot-label"
                                                                src="/assets/addons/groupon/img/decorate/hot-label.png">
                                                        </template>
                                                    </div>
                                                    <el-image :src="Fast.api.cdnurl(it.image)" fit="cover">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="goods-list-activity-describe">
                                                    <div class="goods-list-activity-2item-name">{{it.title}}</div>
                                                    <div class="goods-list-activity-2item-time">
                                                        {{it.subtitle}}
                                                    </div>
                                                    <div class="goods-list-activity-2item-label display-flex">
                                                        <template v-if="it.activity_status=='waiting' || it.activity_status=='ing'">
                                                            <div class="goods-list-activity-2item-label-1">限购5件</div>
                                                        </template>
                                                    </div>
                                                    <div class="goods-list-activity-2item-price display-flex">
                                                        <div class="goods-list-activity-2item-price-left display-flex">
                                                            <div class="goods-list-activity-2item-payprice">
                                                                <span>￥{{it.price.split('.')[0]}}</span>
                                                                <span v-if="it.price.split('.')[1]" class="goods-list-activity-payprice-decimal">.{{it.price.split('.')[1]}}</span>
                                                            </div>
                                                            <div class="goods-list-activity-2item-originalprice">
                                                                ￥{{it.original_price}}</div>
                                                        </div>
                                                        <div class="goods-list-activity-2item-button"
                                                            v-if="it.activity_type!='groupon' && it.activity_type!='seckill'">
                                                            <el-image src="/assets/addons/groupon/img/decorate/cat.png"
                                                                fit="contain">
                                                                <div slot="error" class="image-slot">
                                                                    <i class="el-icon-picture-outline"></i>
                                                                </div>
                                                            </el-image>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="compotent-nodata-tip"
                                            v-if="compotent.content.timeData && compotent.content.timeData.length==0">
                                            <span v-if="compotent.content.category_arr.length==0">请选择分类,生成分类选项卡</span>
                                            <span v-if="compotent.content.category_arr.length>0">选中的分类选项卡没数据</span>
                                        </div>
                                    </div>
                                    <div v-if="compotent.type=='coupons' && compotent.content && compotent.content.timeData" class="compotent-item-container-item compotent-item-container-item-padding" :class="index==centerSelect?'selected':''">
                                        <div v-if="compotent.content.timeData && compotent.content.timeData.length>0" class="coupons-box">
                                            <el-carousel trigger="click" height="104px" :autoplay="false">
                                                <el-carousel-item v-for="it in compotent.content.timeData" :key="it">
                                                    <div class="coupons-box-item" :style="{background:(compotent.content.bgcolor1 && compotent.content.bgcolor2)?'linear-gradient(to right,'+compotent.content.bgcolor1 +','+compotent.content.bgcolor2+')':(compotent.content.bgcolor1?compotent.content.bgcolor1:compotent.content.bgcolor2)}">
                                                        <div class="coupons-item-1">
                                                            <div class="coupons-item-1-1">
                                                                <span>￥</span>
                                                                <span class="coupons-amount">{{it.amount}}</span>
                                                                <span class="coupons-name">{{it.name}}</span>
                                                            </div>
                                                            <div class="coupons-enough">满{{it.enough}}可用</div>
                                                            <div class="coupons-time">有效期{{moment(it.usetimestart*1000).format('YYYY.MM.DD')}}至{{moment(it.usetimeend*1000).format('YYYY.MM.DD')}}</div>
                                                        </div>
                                                        <div class="coupons-item-2">
                                                            <div class="coupons-get">立即领取</div>
                                                            <div class="coupons-stock">仅剩{{it.stock}}张</div>
                                                        </div>
                                                    </div>
                                                </el-carousel-item>
                                            </el-carousel>
                                        </div>
                                        <el-image v-if="compotent.content.timeData && compotent.content.timeData.length==0"
                                            src="/assets/addons/groupon/img/decorate/coupons_bg.png" fit="contain">
                                        </el-image>
                                    </div>
                                    <div v-if="index==centerSelect && compotent.type!='header'" class="compotent-delete-icon">
                                        <i class="el-icon-error" @click.stop="centerDel(index)"></i>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </draggable>
                </div>
                <div v-if="isPageType=='popup'" class="decorate-center-container" class="popup-container">
                    <div v-for="(item,index) in templateData" :key="item.id" class="popup-item"
                        @click.stop="showForm(index)">
                        <div class="popup-item-container">
                            <div class="popup-item-list">
                                <div class="popup-item-list-image" v-for="(popup,idx) in item.content.list" @click="popupSelect(idx)">
                                    <el-image
                                        :style="{left:idx*20+'px',top:idx*20+'px','z-index':popupIndex==idx?2000:100}"
                                        :src="Fast.api.cdnurl(popup.image)" fit="contain">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="isPageType=='float-button'" class="decorate-center-container float-button-container">
                    <div class="float-button-item">
                        <div class="float-button-image-container">
                            <div class="float-button-image" v-for="(float,idx) in templateData[0].content.list">
                                <el-image
                                    :src="Fast.api.cdnurl(float.btnimage)" fit="contain">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </div>
                        </div>
                        <div class="float-button-image" @click.stop="isfloat = !isfloat">
                            <el-image
                                :src="Fast.api.cdnurl(templateData[0].content.image)" fit="contain">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </div>
                    </div>
                </div>
                <div class="decorate-index-typechange">
                    <div v-for="item in pageTypeList" class="btn-common decorate-typechange-button"
                        :class="item.type==isPageType?'decorate-typechange-button-active':''" 
                        @click="selectType(item.type)">
                        {{item.name}}
                    </div>
                </div>
            </template>
        </div>
        <div class="right-container">
            <div class="decorate-right scrollbar-container" v-if="centerSelect!=null">
                <div class="decorate-right-item item-title">
                    <img v-if="templateForm.type=='category-tabs'" src="/assets/addons/groupon/img/decorate/category_tabs.png" />
                    <img v-if="templateForm.type=='store'" src="/assets/addons/groupon/img/decorate/store.png" />
                    <img v-if="templateForm.type=='banner'" src="/assets/addons/groupon/img/decorate/banner.png" />
                    <img v-if="templateForm.type=='special-image'" src="/assets/addons/groupon/img/decorate/special-image.png"/>
                    <img v-if="templateForm.type=='menu'"src="/assets/addons/groupon/img/decorate/menu.png" />
                    <img v-if="templateForm.type=='adv'" src="/assets/addons/groupon/img/decorate/adv.png" />
                    <img v-if="templateForm.type=='goods-group'" src="/assets/addons/groupon/img/decorate/goods-group.png"/>
                    <img v-if="templateForm.type=='goods-list'" src="/assets/addons/groupon/img/decorate/goods-list.png"/>
                    <img v-if="templateForm.type=='title-block'" src="/assets/addons/groupon/img/decorate/title-block.png"/>
                    <img v-if="templateForm.type=='coupons'" src="/assets/addons/groupon/img/decorate/coupons.png" />
                    <img v-if="templateForm.type=='popup'" src="/assets/addons/groupon/img/decorate/popup.png" />
                    <img v-if="templateForm.type=='float-button'" src="/assets/addons/groupon/img/decorate/float-button.png"/>
                    <span v-if="templateForm.type!='order-card' && templateForm.type!='wallet-card'" class="decorate-right-item-title">
                        {{templateForm.name}}
                    </span>
                </div>
                <div v-if="templateForm.type=='header'" class="select-style">
                    <el-row class="select-style-item-box">
                        <el-col :xs="6" :sm="6">
                            <div class="select-style-item-tip">
                                背景颜色
                            </div>
                        </el-col>
                        <el-col :xs="16" :sm="16">
                            <div class="select-style-item-select input-select-inline">
                                <el-input v-model="templateForm.content.bgcolor" size="mini"></el-input>
                                <el-color-picker v-model="templateForm.content.bgcolor" size="mini"></el-color-picker>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="templateForm.type=='store'" class="select-style">
                    <el-row class="select-style-item-box">
                        <el-col :xs="6" :sm="6">
                            <div class="select-style-item-tip">
                                背景颜色
                            </div>
                        </el-col>
                        <el-col :xs="16" :sm="16">
                            <div class="select-style-item-select input-select-inline">
                                <el-input v-model="templateForm.content.bgcolor" size="mini"></el-input>
                                <el-color-picker v-model="templateForm.content.bgcolor" size="mini" show-alpha></el-color-picker>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="select-style-item-box">
                        <el-col :xs="6" :sm="6">
                            <div class="select-style-item-tip">
                                字体颜色
                            </div>
                        </el-col>
                        <el-col :xs="16" :sm="16">
                            <div class="select-style-item-select input-select-inline">
                                <el-input v-model="templateForm.content.color" size="mini"></el-input>
                                <el-color-picker v-model="templateForm.content.color" size="mini"></el-color-picker>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-if="templateForm.type=='special-image'" class="select-style">
                    <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    选择图片
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <div class="select-img image-border" :class="'bannerimg'+index"
                                        crossorigin="anonymous">
                                        <el-image :src="Fast.api.cdnurl(item.image)" fit="cover">
                                            <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                            </div>
                                        </el-image>
                                    </div>
                                    <div class="btn-common margin-left-20 "
                                        @click="choosePicture('special-image',index)">
                                        {{item.image?'重新选择':'选择图片'}}
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                            <el-col :xs="16" :sm="16" :offset="6">
                                建议尺寸:750*350
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    背景颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input v-model="item.bgcolor" size="mini"></el-input>
                                    <el-color-picker v-model="item.bgcolor" size="mini"></el-color-picker>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="templateForm.type=='banner'" class="select-style">
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="select-style-item-tip">
                                        图片{{index+1}}
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <i class="el-icon-error" @click.stop="rightDel(index)"></i>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select input-select-inline">
                                        <div class="select-img image-border" crossorigin="anonymous">
                                            <el-image :src="Fast.api.cdnurl(item.image)" fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div class="btn-common margin-left-20 " @click="choosePicture('banner',index)">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:750*350
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink('banner',index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        背景颜色
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select input-select-inline">
                                        <el-input v-model="item.bgcolor" size="mini"></el-input>
                                        <el-color-picker v-model="item.bgcolor" size="mini"></el-color-picker>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('banner')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
                <div v-if="templateForm.type=='menu'" class="select-style">
                    <el-row class="select-style-item-box" style="margin: 0 0 16px;">
                        <el-col :xs="6" :sm="6">
                            <div class="select-style-item-tip radio-tip">
                                样式选择
                            </div>
                        </el-col>
                        <el-col :xs="16" :sm="16">
                            <div class="select-style-item-select">
                                <el-radio-group class="item-radio-group" v-model="templateForm.content.style">
                                    <el-radio :label="4">4列</el-radio>
                                    <el-radio :label="5">5列</el-radio>
                                </el-radio-group>
                            </div>
                        </el-col>
                    </el-row>
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:200}">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="select-style-item-tip">
                                        图片{{index+1}}
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <i class="el-icon-error" @click.stop="rightDel(index)"></i>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        菜单标题
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-input placeholder="最多4个文字" size="mini" v-model="item.name" maxlength="4">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <div class="select-img select-imgzheng image-border">
                                            <el-image
                                                :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/groupon/img/decorate/image-default2.png'"
                                                fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:98x98
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink('menu',index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('menu')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
                <div v-if="templateForm.type=='adv'" class="select-style">
                    <div class="select-style-con">
                        <img :src="advStyleImage[templateForm.content.style - 1].src">
                        <div class="chooseAdvPic" @click.stop="chooseAdvPic">
                            选择风格
                        </div>
                    </div>
                    <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                        <div class="select-style-item-title">
                            图片{{index+1}}:
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    选择图片:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <img class="select-img image-border"
                                        :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/groupon/img/decorate/image-default.png'">
                                    <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                        {{item.image?'重新选择':'选择图片'}}
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    选择链接:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="item.path_type"
                                        @change="isweblink('adv',index)">
                                        <el-radio :label="1">系统链接</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="16" :sm="16" :offset="6">
                                <div class="select-style-item-select" v-if="item.path_type==1">
                                    <div class="btn-common choosePath" :data-index="index">
                                        选择链接
                                    </div>
                                    <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                </div>
                                <div class="select-style-item-select" v-if="item.path_type==2">
                                    <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="templateForm.type=='goods-group'" class="select-style">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            分类商品组
                        </div>
                        <el-row class="select-style-item-box" style="margin: 0 0 16px;">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip radio-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.type">
                                        <el-radio :label="1">1列</el-radio>
                                        <el-radio :label="2">2列</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    选择分类:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.category_name" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('goods-group')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="templateForm.type=='goods-list'" class="select-style">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            商品列表
                        </div>
                        <el-row class="select-style-item-box" style="margin: 0 0 16px;">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip radio-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.type">
                                        <el-radio :label="1">1列</el-radio>
                                        <el-radio :label="2">2列</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    选择商品:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.ids" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('goods-list')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <div style="display: flex;flex-wrap: wrap;padding-left: 15px;padding-top: 16px;"
                            v-if="templateData[centerSelect].content.timeData">
                            <draggable style="display: flex;flex-wrap: wrap;"
                                :list="templateData[centerSelect].content.timeData" v-bind="$attrs"
                                :options="{animation:100}" @end="goodsListEnd">

                                <div style="width: 40px;
                            height: 40px;
                            border-radius: 3px;margin-bottom: 10px;margin-right: 10px;position: relative;"
                                    v-for="(item,index) in templateData[centerSelect].content.timeData">
                                    <el-image class="image-border" style="width: 100%;height: 100%;"
                                        :src="Fast.api.cdnurl(item.image)" fit="contain">
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                    <i style="position: absolute;width: 12px;
                            height: 12px;right: -6px;top: -6px;color: #7438D5;" class="el-icon-error"
                                        @click="customList(index)"></i>
                                </div>
                            </draggable>

                        </div>
                    </div>
                </div>
                <div v-if="templateForm.type=='category-tabs'" class="select-style">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            分类商品组
                        </div>
                        <!-- <el-row class="select-style-item-box" style="margin: 0 0 16px;">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip radio-tip">
                                    样式选择
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-radio-group class="item-radio-group" v-model="templateForm.content.type">
                                        <el-radio :label="1">1列</el-radio>
                                        <el-radio :label="2">2列</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                        </el-row> -->
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    选择分类:
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.ids" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('category-tabs')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="templateForm.type=='title-block'" class="select-style">
                    <div class="select-style-item" :class="templateForm.content.style=='2'?'':'select-style-block'">
                        <el-row class="select-style-item-title">
                            <el-col :xs="24" :sm="24">
                                <div class="select-style-item-tip">
                                    装饰<span style="margin: 10px 0;padding-left: 10px;color: #999;">(建议尺寸:710x84)</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="title-block-body">
                            <div v-if="templateForm.content.style_type">
                                <div class="compotent-title-block-container">
                                    <div class="title-block-title" :style="{color:templateForm.content.color}">
                                        {{templateForm.content.name}}
                                    </div>
                                    <img class="title-block-style"
                                        :src="titleBlock.data[templateForm.content.style_type-1].src"
                                        :style="{margin:0}">
                                </div>
                                <div class="title-block-btn" @click="selectTitleBlock(null)">
                                    选择样式
                                </div>
                            </div>
                            <div v-else>
                                <div v-if="!templateForm.content.image">
                                    <div v-for="(it,idx) in titleBlock.data" class="compotent-title-block-container"
                                        @click="selectTitleBlock(idx)">
                                        <div class="title-block-title" :style="{color:templateForm.content.color}">
                                            {{templateForm.content.name}}
                                        </div>
                                        <img class="title-block-style image-border" :src="Fast.api.cdnurl(it.src)"
                                            :style="{margin:idx==titleBlock.length-1?'0':''}">
                                    </div>
                                </div>
                                <div v-if="templateForm.content.image">
                                    <div class="compotent-title-block-container">
                                        <div class="title-block-title" :style="{color:templateForm.content.color}">
                                            {{templateForm.content.name}}
                                        </div>
                                        <img class="title-block-style image-border"
                                            :src="Fast.api.cdnurl(templateForm.content.image)">
                                    </div>
                                    <div class="title-block-btn" style="justify-content: space-around;display: flex;">
                                        <span @click="selectTitleBlock(null)">选择样式</span><span class="choosePicture"
                                            data-index="title-block">选择图片</span>
                                    </div>
                                </div>
                            </div>
                        </el-row>
                    </div>
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    文字
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    编辑标题
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <el-input placeholder="最多4个文字" maxlength="4" size="mini"
                                        v-model="templateForm.content.name">
                                    </el-input>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    颜色
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <p class="select-color">
                                        <el-input placeholder="" size="mini" v-model="templateForm.content.color">
                                        </el-input>
                                        <el-color-picker v-model="templateForm.content.color" size="small">
                                        </el-color-picker>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="templateForm.type=='coupons'" class="select-style">
                    <div class="select-style-item">
                        <div class="select-style-item-title">
                            优惠券
                        </div>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    选择优惠券
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input size="mini" v-model="templateForm.content.ids" disabled>
                                    </el-input>
                                    <div class="btn-common input-select-btn" @click="operation('coupons')">
                                        选择
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    背景颜色1
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input v-model="templateForm.content.bgcolor1" size="mini"></el-input>
                                    <el-color-picker v-model="templateForm.content.bgcolor1" size="mini"></el-color-picker>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip tip-line">
                                    背景颜色2
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select input-select-inline">
                                    <el-input v-model="templateForm.content.bgcolor2" size="mini"></el-input>
                                    <el-color-picker v-model="templateForm.content.bgcolor2" size="mini"></el-color-picker>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div v-if="templateForm.type=='popup'" class="select-style">
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}">
                        <div class="select-style-item select-style-block"
                            v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="select-style-item-tip">
                                        弹窗设置{{index+1}}
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <i class="el-icon-error" @click.stop="rightDel(index)"></i>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        弹窗图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img image-border"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/groupon/img/decorate/image-default.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:612x836
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        选择链接:
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.path_type"
                                            @change="isweblink(index)">
                                            <el-radio :label="1">系统链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    <div class="select-style-item-select" v-if="item.path_type==1">
                                        <div class="btn-common choosePath" :data-index="index">
                                            选择链接
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                    </div>
                                    <div class="select-style-item-select" v-if="item.path_type==2">
                                        <el-input v-model="item.path" size="mini" placeholder="http(s)://"></el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        展示页面
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <div class="btn-common choosePath" :data-index="index" :data-page="'page'"
                                            :data-multiple="true">
                                            选择页面
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.page.join(',')}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        显示类型
                                    </div>
                                </el-col>
                                <el-col :xs="18" :sm="18">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.style">
                                            <el-radio :label="1">仅首次</el-radio>
                                            <el-radio :label="2">多次</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row v-if="item.style==1" style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    进入商城只显示一次广告弹窗，再次进入商城依旧显示一次
                                </el-col>
                            </el-row>
                            <el-row v-if="item.style==2" style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    每次进入该商城页面显示广告弹窗
                                </el-col>
                            </el-row>

                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('popup')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
                <div v-if="templateForm.type=='float-button'" class="select-style">
                    <div class="select-style-item">
                        <el-row class="select-style-item-title">
                            <el-col :xs="12" :sm="12">
                                <div class="select-style-item-tip">
                                    按钮图片
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="select-style-item-box">
                            <el-col :xs="6" :sm="6">
                                <div class="select-style-item-tip">
                                    按钮图片
                                </div>
                            </el-col>
                            <el-col :xs="16" :sm="16">
                                <div class="select-style-item-select">
                                    <img class="select-img select-imgzheng image-border"
                                        :src="templateForm.content.image?Fast.api.cdnurl(templateForm.content.image):'/assets/addons/groupon/img/decorate/image-default2.png'">
                                    <div class="btn-common margin-left-20 choosePicture" data-index="image">
                                        {{templateForm.content.image?'重新选择':'选择图片'}}
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                            <el-col :xs="16" :sm="16" :offset="6">
                                建议尺寸:80x80
                            </el-col>
                        </el-row>
                    </div>
                    <draggable :list="templateForm.content.list" v-bind="$attrs" :options="{animation:100}">
                        <div class="select-style-item" v-for="(item, index) in templateForm.content.list">
                            <el-row class="select-style-item-title">
                                <el-col :xs="12" :sm="12">
                                    <div class="select-style-item-tip">
                                        按钮编辑{{index+1}}
                                    </div>
                                </el-col>
                                <el-col :xs="12" :sm="12">
                                    <div class="detele-item">
                                        <i class="el-icon-error" @click.stop="rightDel(index)"></i>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        图标名称
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <el-input placeholder="最多4个文字" size="mini" v-model="item.name" maxlength="4">
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        按钮图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img select-imgzheng image-border"
                                            :src="item.btnimage?Fast.api.cdnurl(item.btnimage):'/assets/addons/groupon/img/decorate/image-default2.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index"
                                            data-type="btn">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin: 10px 0;padding-left: 10px;color: #999;">
                                <el-col :xs="16" :sm="16" :offset="6">
                                    建议尺寸:80x80
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        展示页面
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <div class="btn-common choosePath" :data-index="index" :data-page="'page'"
                                            :data-multiple="true">
                                            选择页面
                                        </div>
                                        <span class="margin-left-20 one-ellipsis">{{item.page.join(',')}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        显示类型
                                    </div>
                                </el-col>
                                <el-col :xs="18" :sm="18">
                                    <div class="select-style-item-select">
                                        <el-radio-group class="item-radio-group" v-model="item.style">
                                            <el-radio :label="1">弹窗样式</el-radio>
                                            <el-radio :label="2">页面链接</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="select-style-item-box" v-if="item.style==1">
                                <el-col :xs="6" :sm="6">
                                    <div class="select-style-item-tip">
                                        弹窗图片
                                    </div>
                                </el-col>
                                <el-col :xs="16" :sm="16">
                                    <div class="select-style-item-select">
                                        <img class="select-img image-border"
                                            :src="item.image?Fast.api.cdnurl(item.image):'/assets/addons/groupon/img/decorate/image-default.png'">
                                        <div class="btn-common margin-left-20 choosePicture" :data-index="index">
                                            {{item.image?'重新选择':'选择图片'}}
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <div v-if="item.style==2">
                                <el-row class="select-style-item-box">
                                    <el-col :xs="6" :sm="6">
                                        <div class="select-style-item-tip">
                                            选择链接:
                                        </div>
                                    </el-col>
                                    <el-col :xs="16" :sm="16">
                                        <div class="select-style-item-select">
                                            <el-radio-group class="item-radio-group" v-model="item.path_type"
                                                @change="isweblink(index)">
                                                <el-radio :label="1">系统链接</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row class="select-style-item-box">
                                    <el-col :xs="16" :sm="16" :offset="6">
                                        <div class="select-style-item-select" v-if="item.path_type==1">
                                            <div class="btn-common choosePath" :data-index="index">
                                                选择链接
                                            </div>
                                            <span class="margin-left-20 one-ellipsis">{{item.path_name}}</span>
                                        </div>
                                        <div class="select-style-item-select" v-if="item.path_type==2">
                                            <el-input v-model="item.path" size="mini" placeholder="http(s)://">
                                            </el-input>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </draggable>
                    <div class="select-style-item-tip">
                        <div @click.stop="addForm('float-button')" class="btn-common">
                            添加
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-drawer title="选择样式" :visible.sync="advdrawer" :with-header="false" size="342px">
        <div style="display: flex;flex-wrap: wrap;padding:15px;">
            <el-row :gutter="10">
                <el-col :xs="12" :sm="12" v-for="(i,index) in advStyleImage">
                    <img style="margin:10px 0;width:154px;height: 100px;" :src="Fast.api.cdnurl(i.src)"
                        @click.stop="changeAdv(index,i.num)">
                </el-col>
            </el-row>
        </div>
    </el-drawer>
    <div class="save-dialog">
        <el-dialog title="保存中" :visible.sync="percentageshow" width="30%" :close-on-click-modal="false"
            :show-close="false">
            <div>
                <el-progress :percentage="percentage" :color="customColors"></el-progress>
            </div>
        </el-dialog>
    </div>
</div>